<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>售后工单统计分析</title>
    <link rel="stylesheet" href="../../../assets/lib/layui/css/layui.css" media="all">
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">售后工单统计分析</div>
            <div class="layui-card-body">
                <!-- 搜索条件 -->
                <form class="layui-form layui-form-pane" lay-filter="searchForm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">时间范围</label>
                            <div class="layui-input-inline">
                                <input type="text" name="dateRange" id="dateRange" class="layui-input" placeholder="请选择时间范围">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-normal" id="searchBtn" lay-submit lay-filter="searchBtn">
                                <i class="layui-icon layui-icon-search"></i> 搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

                <!-- 数据概览卡片 -->
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">总工单数</div>
                            <div class="layui-card-body" id="totalOrders">
                                <h2>0</h2>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">完成工单数</div>
                            <div class="layui-card-body" id="completedOrders">
                                <h2>0</h2>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">配件使用数</div>
                            <div class="layui-card-body" id="totalParts">
                                <h2>0</h2>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">平均处理时长</div>
                            <div class="layui-card-body" id="avgProcessTime">
                                <h2>0小时</h2>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 图表展示区域 -->
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                工单类型分布
                                <span class="layui-badge-rim" style="margin-left: 10px; font-size: 12px;">统计范围：所有工单</span>
                            </div>
                            <div class="layui-card-body">
                                <div id="orderTypeChart" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                工单处理趋势
                                <span class="layui-badge-rim" style="margin-left: 10px; font-size: 12px;">每日新增和完成的工单数量对比</span>
                            </div>
                            <div class="layui-card-body">
                                <div id="orderTrendChart" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 工人效率排名 -->
                <div class="layui-card">
                    <div class="layui-card-header">工人效率排名</div>
                    <div class="layui-card-body">
                        <table id="workerTable" lay-filter="workerTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../../assets/lib/layui/layui.js"></script>
    <script src="../../assets/lib/layui/custom.js"></script>
    <script type="text/javascript">
        layui.config({base: '../../js/saleAnalysis/'}).use('afterSaleAnalysis');
    </script>
</body>
</html> 